<template>
	<view class="smart-lock-page">
		<!-- 智能锁卡片 -->
		<view class="lock-container" v-if="localLocksList && localLocksList.length > 0">
			<view v-for="(lock, index) in localLocksList" :key="index" class="lock-card">
				<!-- 基本信息区域 -->
				<view class="lock-content">
					<!-- 电量和时间信息 -->
					<view class="info-row">
						<!-- 电池信息 -->
						<view class="info-card battery-card">
							<view class="card-header">
								<text class="iconfont icon-battery">&#xe678;</text>
								<text class="card-title">电池电量</text>
							</view>
							<view class="card-content">
								<view class="battery-display">
									<view class="battery-bar">
										<view class="battery-level" :style="{width: (lock.batteryLevel || 0) + '%', backgroundColor: getBatteryColor(lock.batteryLevel || 0)}"></view>
									</view>
									<text class="battery-text">{{ lock.batteryLevel || 0 }}%</text>
								</view>
							</view>
						</view>

						<!-- 通讯时间 -->
						<view class="info-card time-card">
							<view class="card-header">
								<text class="iconfont icon-time">&#xe6bf;</text>
								<text class="card-title">最后通讯时间</text>
							</view>
							<view class="card-content">
								<text class="time-text">{{ lock.lastCommunication }}</text>
							</view>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="action-section">
						<button class="action-btn remote-btn" @click="handleRemoteOpen(lock)">
							<!-- <text class="iconfont icon-unlock">&#xe60b;</text> -->
							<text style="font-weight: 600;" >一键开锁</text>
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view class="empty-state" v-else>
			<view class="empty-icon">
				<text class="iconfont icon-lock">&#xe60a;</text>
			</view>
			<text class="empty-text">暂无智能锁信息</text>
		</view>

		<!-- 一键开锁确认弹窗 -->
		<uni-popup ref="remoteOpenPopup" type="center" background-color="#fff" :mask-click="false">
			<view class="remote-open-popup">
				<view class="popup-header">
					<text class="popup-title">一键开锁确认</text>
					<text class="iconfont icon-close" @click="closeRemoteOpenPopup">&#xe622;</text>
				</view>
				<view class="popup-content">
					<view class="confirm-info">
						<view class="info-row">
							<text class="info-label">房间信息：</text>
							<text class="info-value">{{ remoteOpenForm.roomName || '' }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">设备信息：</text>
							<text class="info-value">{{ remoteOpenForm.deviceName || '智能门锁' }}</text>
						</view>
						<view class="warning-tip">
							<text class="iconfont icon-warning">&#xe6bf;</text>
							<text>注意：门锁必须联网才能成功执行一键开锁操作</text>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="popup-btn cancel-btn" @click="closeRemoteOpenPopup">取消</button>
					<button class="popup-btn confirm-btn" @click="submitRemoteOpen" :loading="remoteOpenLoading">确认开门</button>
				</view>
			</view>
		</uni-popup>

		<!-- 门锁激活Wi-Fi提示弹窗 -->
		<uni-popup ref="activateWifiPopup" type="center" background-color="#fff" :mask-click="false">
			<view class="activate-wifi-popup">
				<view class="popup-header">
					<text class="popup-title">等待门锁激活Wi-Fi</text>
					<text class="iconfont icon-close" @click="closeActivateWifiPopup">&#xe622;</text>
				</view>
				<view class="popup-content">
					<view class="activate-info">
						<view class="lock-icon">
							<text class="iconfont icon-lock">&#xe60a;</text>
						</view>
						<view class="instruction-text">
							<text>请先在门锁输入9#激活</text>
							<text>Wi-Fi,激活后APP会自动发</text>
							<text>送命令</text>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="popup-btn success-btn" @click="closeActivateWifiPopup">我知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { resetAdminPassword } from '@/api/lock/lock';
	import { hxAddSingleKey } from '@/api/lock/details';
	import { getHome } from '@/api/lock/home';
	// 添加一键开锁API导入
	import { remoteOpenLock } from '@/api/lock/remoteOpen';

	export default {
		name: 'SmartLocks',
		props: {
			roomId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showPwd: false,
				showAdvanced: false,
				refreshing: false,
				localLocksList: [], // 本地锁列表数据
				tempPassword: null, // 临时密码
				passwordValidTime: null, // 密码有效期
				currentLock: null, // 当前操作的锁
				resetPwdLoading: false,
				remoteOpenLoading: false, // 一键开锁加载状态
				remoteOpenForm: { // 一键开锁表单数据
					roomName: '',
					deviceName: ''
				}
			};
		},
		watch: {
			// 监听 roomId 变化，重新获取数据
			roomId: {
				handler(newVal) {
					if (newVal) {
						this.initData();
					}
				},
				immediate: true
			}
		},
		onLoad(options) {
			if (options.roomId) {
				this.roomId = options.roomId;
				this.initData();
			}
		},
		methods: {
			// 初始化数据
			async initData() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					console.log('开始获取房间信息，roomId:', this.roomId);
					const res = await getHome(this.roomId);
					console.log('getHome接口返回数据:', res);
					
					if (res.code === 200 && res.data) {
						// 检查返回的数据结构
						console.log('房间数据详情:', res.data);
						
						// getHome 返回的是房间信息，锁的信息直接包含在房间对象中
							// 有锁信息，创建一个锁对象
							const lockData = {
								id: res.data.id,
								mac: res.data.mac,
								batteryLevel: res.data.batteryLevel,
								lastCommunication: res.data.lastCommunication,
								pwd: res.data.pwd,
								secKey: res.data.secKey,
								roomNum: res.data.roomNum,
								roomName: res.data.roomName,
								cellName: res.data.cellName,
								unitName: res.data.unitName,
								floorName: res.data.floorName,
								lockState: res.data.lockState,
								// 添加其他可能需要的字段
								doorName: `${res.data.cellName}-${res.data.unitName}-${res.data.floorName}-${res.data.roomName}`,
								roomId: res.data.roomNum
							};
							
							console.log('构建的锁数据:', lockData);
							this.localLocksList = [lockData];
					
					} else {
						console.warn('接口返回数据格式不正确:', res);
						this.localLocksList = [];
						uni.showToast({
							title: res.msg || '获取房间信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取房间信息失败:', error);
					this.localLocksList = [];
					uni.showToast({
						title: '获取房间信息失败',
						icon: 'none'
					});
				}
				uni.hideLoading();
			},
			
			// 获取电池颜色
			getBatteryColor(level) {
				level = parseInt(level || 0);
				if (level >= 60) {
					return '#4cd964'; // 高电量 - 绿色
				} else if (level >= 30) {
					return '#f0ad4e'; // 中等电量 - 橙色
				} else {
					return '#dd524d'; // 低电量 - 红色
				}
			},
			
			// 获取电池样式类名
			getBatteryColorClass(level) {
				level = parseInt(level || 0);
				if (level >= 60) {
					return 'battery-good';
				} else if (level >= 30) {
					return 'battery-medium';
				} else {
					return 'battery-low';
				}
			},
			
			// 获取信号强度等级(1-4)
			getSignalStrength(rssi) {
				rssi = parseInt(rssi || 0);
				if (rssi >= -60) {
					return 4; // 强信号
				} else if (rssi >= -70) {
					return 3; // 较好信号
				} else if (rssi >= -80) {
					return 2; // 中等信号
				} else {
					return 1; // 弱信号
				}
			},
			
			// 获取锁状态
			getLockStatus(lock) {
				if (!lock || !lock.status) return 'error';
				
				switch (lock.status) {
					case 1:
						return 'error';
					case 3:
						return 'offline';
					case 4:
						return 'online';
					default:
						return 'error';
				}
			},

			// 检查是否在线
			isOnline(lock) {
				return lock && lock.status === 4;
			},

			// 获取状态标签样式
			getStatusTagClass(lock) {
				if (!lock) return 'danger';
				
				switch (lock.status) {
					case 4:
						return 'success';
					case 3:
						return 'warning';
					case 1:
					default:
						return 'danger';
				}
			},

			// 获取状态文本
			getStatusText(lock) {
				if (!lock) return '异常';
				
				switch (lock.status) {
					case 4:
						return '在线';
					case 3:
						return '离线';
					case 1:
						return '异常';
					default:
						return '未知';
				}
			},
			
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '未知';
				try {
					const date = new Date(timeStr);
					return date.toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit',
						second: '2-digit'
					});
				} catch (e) {
					return timeStr;
				}
			},
			
			// 格式化MAC地址
			formatMacAddress(mac) {
				if (!mac) return '';
				// 移除所有非字母数字字符
				mac = mac.replace(/[^A-Fa-f0-9]/g, '');
				// 转大写
				mac = mac.toUpperCase();
				
				// 如果MAC地址长度不足12位，在前面补0
				if (mac.length < 12) {
					mac = mac.padStart(12, '0');
				}
				
				// 确保长度是偶数，如果不是偶数，在前面补0
				if (mac.length % 2 !== 0) {
					mac = '0' + mac;
				}
				
				// 每两个字符插入一个冒号
				const formatted = mac.replace(/(.{2})/g, '$1:').slice(0, -1);
				console.log('格式化MAC地址:', mac, '->', formatted);
				return formatted;
			},
			
			// 验证MAC地址格式
			validateMacAddress(mac) {
				if (!mac) return false;
				// 移除所有非字母数字字符后检查长度
				const cleanMac = mac.replace(/[^A-Fa-f0-9]/g, '');
				console.log('验证MAC地址:', mac, '清理后:', cleanMac, '长度:', cleanMac.length);
				// 允许6-12位的MAC地址（去掉前导零后）
				const isValid = cleanMac.length >= 6 && cleanMac.length <= 12;
				console.log('MAC地址验证结果:', isValid);
				return isValid;
			},
			
			// 处理生成临时密码
			hxAddSingleKeyHandel(lock) {
				// 保存当前锁信息
				this.currentLock = lock;
				this.tempPassword = null;
				this.passwordValidTime = null;
				
				// 显示密码弹窗
				this.$refs.passwordPopup.open();
				
				// 生成临时密码
				this.generateTempPassword(lock);
			},

			// 生成临时密码
			generateTempPassword(lock) {
				if (!lock || !lock.mac) {
					uni.showToast({
						title: '无法获取设备信息',
						icon: 'none'
					});
					return;
				}
				
				// 构建请求参数
				const params = {
					type: 1, // 临时密码类型
					mac: lock.mac,
					homeId: this.roomId
				};
				
				// 调用API生成密码
				hxAddSingleKey(params).then(res => {
					if (res.code === 200 && res.data) {
						this.tempPassword = res.data.password || res.data.jieMiPassword;
						this.passwordValidTime = res.data.endTime || '24小时内';
						uni.showToast({
							title: '密码生成成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg || '生成密码失败',
							icon: 'none'
						});
						this.closePasswordPopup();
					}
				}).catch(err => {
					console.error('生成密码失败', err);
					uni.showToast({
						title: '生成密码失败',
						icon: 'none'
					});
					this.closePasswordPopup();
				});
			},

			// 关闭密码弹窗
			closePasswordPopup() {
				this.$refs.passwordPopup.close();
			},

			resetAdminPwd(lock) {
				this.resetPwdLoading = true
				uni.showModal({
					title: '提示',
					content: '确定要重置该锁的管理员密码吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							resetAdminPassword({
								mac: lock.mac
							}).then(result => {
								if (result.code === 200) {
									uni.showToast({
										title: '管理员密码重置成功！按*1#激活生效',
										icon: 'none',
										duration: 3000
									})
									this.initData();
								} else {
									uni.showToast({
										title: result.msg || '重置失败',
										icon: 'none'
									})
								}
							}).catch(error => {
								uni.showToast({
									title: '重置失败：' + error,
									icon: 'none'
								})
							}).finally(() => {
								this.resetPwdLoading = false
							})
						} else {
							this.resetPwdLoading = false
						}
					},
					fail: () => {
						this.resetPwdLoading = false
						uni.showToast({
							title: '操作取消',
							icon: 'none'
						})
					}
				})
			},

			// 更改MAC地址
			changeMac(lock) {
				uni.showActionSheet({
					itemList: ['手动输入', '扫码读取'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 手动输入
							this.showMacInputModal('更改MAC地址', '', (newMac) => {
								this.updateMacAddress(lock, newMac);
							});
						} else if (res.tapIndex === 1) {
							// 扫码读取
							this.scanMacAddress((scannedMac) => {
								this.updateMacAddress(lock, scannedMac);
							});
						}
					}
				});
			},

			// 绑定MAC地址
			bindMac() {
				uni.showActionSheet({
					itemList: ['手动输入', '扫码读取'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 手动输入
							this.showMacInputModal('绑定MAC地址', '', (mac) => {
								this.addMacAddress(mac);
							});
						} else if (res.tapIndex === 1) {
							// 扫码读取
							this.scanMacAddress((scannedMac) => {
								this.addMacAddress(scannedMac);
							});
						}
					}
				});
			},

			// 处理返回
			handleBack() {
				uni.navigateBack();
			},
			
			// 显示MAC地址输入弹窗
			showMacInputModal(title, defaultValue, callback) {
				uni.showModal({
					title: title,
					content: defaultValue,
					editable: true,
					placeholderText: '如：DFF15F6703D2',
					success: (res) => {
						if (res.confirm && res.content) {
							const mac = res.content.trim();
							if (!mac) {
								uni.showToast({
									title: 'MAC地址不能为空',
									icon: 'none'
								});
								return;
							}
							
							if (!this.validateMacAddress(mac)) {
								uni.showToast({
									title: 'MAC地址格式不正确',
									icon: 'none'
								});
								return;
							}
							
							callback(mac);
						}
					}
				});
			},
			
			// 扫码读取MAC地址
			scanMacAddress(callback) {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果:', res.result);
						
						// 处理扫码结果，提取MAC地址
						const scannedMac = this.extractMacFromScanResult(res.result);
						console.log('提取的MAC地址:', scannedMac);
						
						if (scannedMac) {
							console.log('提取的MAC地址:', scannedMac);
							
							// 验证MAC地址格式
							if (this.validateMacAddress(scannedMac)) {
								uni.showModal({
									title: '确认MAC地址',
									content: `扫描到的MAC地址：${this.formatMacAddress(scannedMac)}\n是否确认使用？`,
									success: (modalRes) => {
										if (modalRes.confirm) {
											callback(scannedMac);
										}
									}
								});
							} else {
								uni.showToast({
									title: '扫描结果不是有效的MAC地址',
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							uni.showToast({
								title: '未找到有效的MAC地址',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.error('扫码失败:', err);
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 从扫码结果中提取MAC地址
			extractMacFromScanResult(scanResult) {
				if (!scanResult) return null;
				
				console.log('开始提取MAC地址，原始结果:', scanResult);
				
				// 移除所有空格和换行符
				let result = scanResult.replace(/\s+/g, '');
				console.log('清理空格后:', result);
				
				// 先去掉前面所有的0
				let cleanResult = result.replace(/^0+/, '');
				console.log('去掉前导零后:', cleanResult);
				
				// 如果去掉前导零后还有内容，直接返回
				if (cleanResult && cleanResult.length > 0) {
					// 确保是有效的十六进制字符
					if (/^[0-9A-Fa-f]+$/.test(cleanResult)) {
						console.log('最终提取的MAC地址:', cleanResult);
						return cleanResult;
					}
				}
				
				// 如果上面的方法不行，尝试正则匹配
				const macPattern = /[0-9A-Fa-f]{3,12}/g;
				const matches = result.match(macPattern);
				console.log('正则匹配结果:', matches);
				
				if (matches && matches.length > 0) {
					// 取第一个匹配的MAC地址
					let mac = matches[0];
					console.log('第一个匹配:', mac);
					
					// 移除前面的0，保留有意义的MAC地址部分
					mac = this.removeLeadingZeros(mac);
					console.log('去掉前导零后:', mac);
					
					return mac;
				}
				
				return null;
			},
			
			// 移除前面的0，保留有意义的MAC地址部分
			removeLeadingZeros(mac) {
				if (!mac) return mac;
				
				// 移除前面所有的0
				let result = mac.replace(/^0+/, '');
				
				// 如果全部都是0，返回一个0
				if (result === '') {
					result = '0';
				}
				
				return result;
			},
			
			// 更新MAC地址
			updateMacAddress(lock, newMac) {
				// 调用修改MAC接口
				// This function is no longer needed as listByHomeId is removed.
				// If you need to update MAC, you'll need to implement it based on the new API.
				// For now, we'll just show a message.
				uni.showToast({
					title: 'MAC地址更新功能待实现',
					icon: 'none'
				});
				console.warn('MAC地址更新功能待实现，当前锁ID:', lock.id);
			},
			
			// 添加MAC地址
			addMacAddress(mac) {
				// 调用新增MAC接口
				// This function is no longer needed as listByHomeId is removed.
				// If you need to add MAC, you'll need to implement it based on the new API.
				// For now, we'll just show a message.
				uni.showToast({
					title: 'MAC地址绑定功能待实现',
					icon: 'none'
				});
				console.warn('MAC地址绑定功能待实现，当前房间ID:', this.roomId);
			},

			// 一键开锁
			handleRemoteOpen(lock) {
				this.currentLock = lock;
				this.remoteOpenForm.roomName = lock.doorName || '未知房间';
				this.remoteOpenForm.deviceName = lock.doorName || '智能门锁';
				this.$refs.remoteOpenPopup.open();
			},

			// 提交一键开锁
			submitRemoteOpen() {

				this.remoteOpenLoading = true;
				
				// 构建请求参数 - 参考运维端，直接传递roomNum
				const requestData = {
					roomNum: this.currentLock.roomNum || this.currentLock.roomId || this.roomId
				};
				
				// 调用一键开锁API
				remoteOpenLock(requestData).then(result => {
					this.remoteOpenLoading = false;
					
					if (result.resultCode === 0) {
						uni.showToast({
							title: '一键开锁指令发送成功',
							icon: 'success'
						});
						this.closeRemoteOpenPopup();
						
						// 记录开门日志
						this.recordOpenLog("一键开锁");
					} else {
						// 根据错误码显示不同的错误信息
						let errorMsg = "一键开锁失败";
						switch (result.resultCode) {
							case 500001:
								errorMsg = "参数异常";
								break;
							case 500002:
								errorMsg = "不支持该类型的门锁";
								break;
							case 500003:
								errorMsg = "房间不存在";
								break;
							case 500004:
								// 门锁需要激活Wi-Fi，显示激活提示弹窗
								this.closeRemoteOpenPopup(); // 关闭一键开锁确认弹窗
								this.$refs.activateWifiPopup.open(); // 显示激活Wi-Fi提示弹窗
								return; // 直接返回，不显示错误消息
							default:
								errorMsg = result.reason || "一键开锁失败";
						}
						uni.showToast({
							title: errorMsg,
							icon: 'none'
						});
					}
				}).catch(error => {
					this.remoteOpenLoading = false;
					console.error("一键开锁失败:", error);
					uni.showToast({
						title: "一键开锁失败，请检查网络连接",
						icon: 'none'
					});
				});
			},

			// 关闭一键开锁弹窗
			closeRemoteOpenPopup() {
				this.$refs.remoteOpenPopup.close();
			},

			// 关闭Wi-Fi激活提示弹窗
			closeActivateWifiPopup() {
				this.$refs.activateWifiPopup.close();
			},

			// 记录开门日志
			recordOpenLog(openType) {
				// 这里可以调用开门日志记录接口
				console.log(`记录${openType}日志:`, this.remoteOpenForm);
			}
		}
	}
</script>

<style lang="scss">
	/* 添加导航栏样式 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.navbar-left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			
			.iconfont {
				margin-right: 10rpx;
			}
		}
		
		.navbar-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}

	/* 调整容器上边距以适应导航栏 */
	.smart-lock-page {
		padding-top: 18rpx; /* 适应导航栏高度 */
	}

	.lock-container {
		padding: 20rpx;
	}
	
	.lock-card {
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.lock-card:active {
		transform: translateY(-4rpx);
	}
	
	.lock-header {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		padding: 40rpx;
		position: relative;
		overflow: hidden;
	}
	
	.lock-header::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%);
		transform: rotate(45deg);
	}
	
	.lock-icon-wrapper {
		position: relative;
		margin-right: 30rpx;
	}
	
	.lock-icon {
		width: 100rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}
	
	.lock-icon .iconfont {
		font-size: 56rpx;
		color: #ffffff;
	}
	
	.lock-status-indicator {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 4rpx solid #ffffff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.lock-status-indicator.online {
		background-color: #67c23a;
	}
	
	.lock-status-indicator.offline {
		background-color: #e6a23c;
	}
	
	.lock-status-indicator.error {
		background-color: #f56c6c;
	}
	
	.lock-info {
		flex: 1;
	}
	
	.lock-name {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 600;
		margin-bottom: 16rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		display: block;
	}
	
	.lock-status {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.85);
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}
	
	.lock-content {
		padding: 30rpx;
	}
	
	.info-row {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.info-card {
		flex: 1;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		padding: 24rpx;
		transition: all 0.3s ease;
		border: 2rpx solid rgba(0, 0, 0, 0.05);
		min-width: 0; /* 防止内容溢出 */
	}
	
	.info-card:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 16rpx;
	}
	
	.card-header .iconfont {
		font-size: 32rpx;
		color: #4B71F7;
	}
	
	.card-title {
		font-size: 26rpx;
		color: #606266;
		font-weight: 500;
		white-space: nowrap; /* 防止标题换行 */
	}
	
	.card-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.battery-display {
		display: flex;
		align-items: center;
		gap: 16rpx;
		width: 100%;
	}
	
	.battery-bar {
		flex: 1;
		height: 20rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		min-width: 0; /* 防止进度条溢出 */
	}
	
	.battery-level {
		height: 100%;
		border-radius: 10rpx;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	
	.battery-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		min-width: 60rpx;
		text-align: right;
		white-space: nowrap; /* 防止百分比换行 */
	}
	
	/* 时间卡片样式 */
	.time-card .card-content {
		justify-content: center;
	}
	
	.time-text {
		font-size: 28rpx;
		color: #303133;
		font-weight: 500;
		text-align: center;
		line-height: 1.4;
		word-break: break-all; /* 允许长文本换行 */
		max-width: 100%; /* 确保不超出容器 */
	}
	
	.action-section {
		margin-top: 10rpx;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		gap: 10rpx;
	}
	
	.action-btn {
		width: 100%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		border-radius: 16rpx;
		border: none;
		font-size: 32rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		box-shadow: 0 8rpx 20rpx rgba(75, 113, 247, 0.3);
	}
	
	.action-btn text {
		font-size: 24rpx;
		white-space: nowrap;
	}
	
	.action-btn .iconfont {
		font-size: 36rpx;
	}
	
	.remote-btn {
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
		box-shadow: 0 8rpx 20rpx rgba(75, 113, 247, 0.3);
	}
	
	.remote-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(75, 113, 247, 0.2);
	}
	
	.empty-state {
		width: 100%;
		padding: 120rpx 0;
		text-align: center;
	}
	
	.empty-icon {
		width: 140rpx;
		height: 140rpx;
		background: rgba(75, 113, 247, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20rpx;
	}
	
	.empty-icon .iconfont {
		font-size: 72rpx;
		color: #4B71F7;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #909399;
	}

	.bind-btn {
		margin-top: 20rpx;
		padding: 16rpx 48rpx;
		background: rgba(223, 146, 11, 1);
		border-radius: 40rpx;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}
	
	.bind-btn text {
		font-size: 28rpx;
		color: #ffffff;
	}
	
	.bind-btn:active {
		transform: scale(0.95);
		opacity: 0.9;
		background: rgba(255, 255, 255, 0.3);
	}

	/* 密码弹窗样式优化 */
	.password-popup {
		width: 680rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: #ffffff;
	}
	
	.password-popup-header {
		padding: 40rpx;
	}
	
	.password-popup-content {
		padding: 40rpx;
	}
	
	.password-lock-icon {
		width: 140rpx;
		height: 140rpx;
		margin: 0 auto 40rpx;
	}
	
	.password-lock-icon .iconfont {
		font-size: 72rpx;
	}
	
	.password-digits {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.password-digit {
		width: 90rpx;
		height: 120rpx;
		font-size: 56rpx;
	}
	
	.password-info {
		padding: 30rpx;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.password-info .iconfont {
		font-size: 48rpx;
	}
	
	.password-info text:last-child {
		font-size: 28rpx;
		line-height: 1.5;
	}
	
	.password-loading {
		padding: 60rpx 0;
	}
	
	.password-loading .iconfont {
		font-size: 72rpx;
		margin-bottom: 24rpx;
	}
	
	.popup-btn {
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
	}

	@keyframes spinning {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.spinning {
		animation: spinning 1.5s linear infinite;
	}

	.reset-status {
		font-size: 24rpx;
		color: #e6a23c;
		background-color: rgba(230, 162, 60, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	/* 一键开锁弹窗样式 */
	.remote-open-popup {
		width: 680rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: #ffffff;
	}
	
	.remote-open-popup-header {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
	}
	
	.icon-close {
		font-size: 36rpx;
		color: #ffffff;
		cursor: pointer;
	}
	
	.remote-open-popup-content {
		padding: 40rpx;
		text-align: left;
	}
	
	.confirm-info {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}
	
	.info-row {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #606266;
		word-break: break-all;
	}
	
	.warning-tip {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 20rpx;
		background-color: #fffbe6;
		border: 2rpx solid #ffe58f;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
	
	.warning-tip .iconfont {
		font-size: 36rpx;
		color: #ffe58f;
	}
	
	.warning-tip text {
		font-size: 24rpx;
		color: #faad14;
		line-height: 1.6;
	}
	
	.remote-open-popup-footer {
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-around;
		gap: 20rpx;
	}
	
	.cancel-btn {
		flex: 1;
		background: linear-gradient(135deg, #909399, #606266);
		color: #ffffff;
		box-shadow: 0 8rpx 20rpx rgba(144, 147, 153, 0.3);
	}
	
	.cancel-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(144, 147, 153, 0.2);
	}
	
	.confirm-btn {
		flex: 1;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
		box-shadow: 0 8rpx 20rpx rgba(75, 113, 247, 0.3);
	}
	
	.confirm-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(75, 113, 247, 0.2);
	}

	/* Wi-Fi激活提示弹窗样式 */
	.activate-wifi-popup {
		width: 680rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: #ffffff;
	}
	
	.activate-wifi-popup-header {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
	}
	
	.activate-wifi-popup-content {
		padding: 40rpx;
		text-align: center;
	}
	
	.activate-wifi-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.lock-icon {
		width: 140rpx;
		height: 140rpx;
		background: rgba(75, 113, 247, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.lock-icon .iconfont {
		font-size: 72rpx;
		color: #4B71F7;
	}
	
	.instruction-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}
	
	.instruction-text text {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.6;
	}
	
	.activate-wifi-popup-footer {
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: center;
	}
	
	.activate-wifi-popup-footer .popup-btn {
		width: 100%;
	}

	/* 弹窗样式优化 */
	.remote-open-popup,
	.activate-wifi-popup {
		width: 680rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: #ffffff;
	}
	
	.popup-header {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
	}
	
	.icon-close {
		font-size: 36rpx;
		color: #ffffff;
		cursor: pointer;
	}
	
	.popup-content {
		padding: 40rpx;
		text-align: left;
	}
	
	.popup-footer {
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-around;
		gap: 20rpx;
	}
	
	.popup-btn {
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		border: none;
		transition: all 0.3s ease;
	}
	
	.cancel-btn {
		flex: 1;
		background: linear-gradient(135deg, #909399, #606266);
		color: #ffffff;
		box-shadow: 0 8rpx 20rpx rgba(144, 147, 153, 0.3);
	}
	
	.cancel-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(144, 147, 153, 0.2);
	}
	
	.confirm-btn {
		flex: 1;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #ffffff;
		box-shadow: 0 8rpx 20rpx rgba(75, 113, 247, 0.3);
	}
	
	.confirm-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(75, 113, 247, 0.2);
	}

	/* Wi-Fi激活提示弹窗样式 */
	.activate-wifi-popup .popup-header {
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
	}
	
	.activate-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.activate-info .lock-icon {
		width: 140rpx;
		height: 140rpx;
		background: rgba(75, 113, 247, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.activate-info .lock-icon .iconfont {
		font-size: 72rpx;
		color: #4B71F7;
	}
	
	.instruction-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}
	
	.instruction-text text {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.6;
	}
	
	.success-btn {
		background: linear-gradient(135deg, #4B71F7, #3A5FE0) !important;
		color: #ffffff !important;
		box-shadow: 0 8rpx 20rpx rgba(75, 113, 247, 0.3) !important;
	}
	
	.success-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(75, 113, 247, 0.2) !important;
	}
</style>
  
  